<template>
  <div id='echartsLdt' class='ldtBar' />
</template>

<script>

export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      echartsLdt: null,
      option: {
        textStyle: {
            fontSize: 14
        },
        color: ['#FF917C', '#67F9D8', '#FFE434', '#56A3F1'],
        // title: {
        //   text: 'Customized Radar Chart'
        // },
        radar: [
          {
            indicator: [
              { text: '行政编制', max: 100 },
              { text: '公安专项编制', max: 100 },
              { text: '司法专项编制', max: 100 },
              { text: '法院专项编制', max: 100 },
              { text: '检察院专项编制', max: 100 },
              { text: '事业编制', max: 100 }
            ],
            radius: 80, // 缩放
            center: ['40%', '60%'],
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              // formatter: '【{value}】',
              color: '#fff'
            },
            splitArea: {
              areaStyle: {
                // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                // shadowColor: 'rgba(0, 0, 0, 0)',
                // shadowBlur: 10,
                opacity: 0
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.2)'
              }
            },
            splitLine: {
              lineStyle: {
                // color: 'rgba(211, 253, 250, 0.2)'
                color: 'rgba(144, 238, 144, 0.5)'
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            label: {
              show: true,
              fontSize: 14,
              color: '#fff',
              position: 'top'
            },
            data: [
              {
                name: '分值',
                  value: [85, 95, 90, 94, 88, 78]
                // areaStyle: {
                //   color: 'rgba(255, 228, 52, 0.6)'
                // }
              }
            ]
          }
        ]
      }
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      if (newValue === '45%') {
        this.echartsLdt.setOption({
          series: [
            {
              type: 'radar',
              emphasis: {
                lineStyle: {
                  width: 4
                }
              },
              label: {
                show: true,
                color: '#fff',
                position: 'top'
              },
              data: [
                {
                  name: '分值',
                  value: [85, 95, 90, 94, 88, 78]
                  // areaStyle: {
                  //   color: 'rgba(255, 228, 52, 0.6)'
                  // }
                }
              ]
            }
          ]
        })
      } else {
        this.echartsLdt.setOption({
          series: [
            {
              type: 'radar',
              emphasis: {
                lineStyle: {
                  width: 4
                }
              },
              label: {
                show: true,
                color: '#fff',
                position: 'top'
              },
              data: [
                {
                  name: '分值',
                  value: [Math.floor(Math.random() * (60 - 30 + 1)) + 30,
                    Math.floor(Math.random() * (60 - 30 + 1)) + 30,
                    Math.floor(Math.random() * (60 - 30 + 1)) + 30,
                    Math.floor(Math.random() * (60 - 30 + 1)) + 30,
                    Math.floor(Math.random() * (60 - 30 + 1)) + 30,
                    Math.floor(Math.random() * (60 - 30 + 1)) + 30]
                  // areaStyle: {
                  //   color: 'rgba(255, 228, 52, 0.6)'
                  // }
                }
              ]
            }
          ]
        })
      }
    }
  },
  mounted() {
    this.initechartsLdt()
  },
  methods: {
    initechartsLdt() {
      this.echartsLdt = this.$echarts.init(
        document.getElementById('echartsLdt')
      )
      this.echartsLdt.setOption(this.option)
      window.addEventListener('resize', () => this.echartsLdt.resize(), false)
    }
  }
}
</script>

<style lang='scss'>
.ldtBar {
  width: 400px;
  height: 350px;
  // background: rgba(0, 18, 67, 0.4);
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
